<template>
  <el-drawer
    :title="textMap[dialogStatus]"
    :visible.sync="visibility"
    size="39%"
  >
    <el-form
      ref="dataForm"
      :model="temp"
      :rules="rules"
      label-position="right"
      label-width="120px"
      style="width: 600px"
    >
      <el-form-item label="设备分类" prop="category">
        <el-select v-model.trim="temp.category">
          <el-option
            v-for="item in categoryOptions"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          />
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="设备编号" prop="equipmentCode">
            <el-input
              v-model.trim="temp.equipmentCode"
              :disabled="dialogStatus == 'update'"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备名称" prop="equipmentName">
            <el-input v-model.trim="temp.equipmentName" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="品牌/厂家">
            <el-input v-model.trim="temp.brand" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="型号">
            <el-input v-model.trim="temp.model" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="规格" prop="specification">
            <el-input v-model.trim="temp.specification" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="有效期" prop="expirationDate">
            <el-date-picker
              v-model.trim="temp.expirationDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="有效期"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="维护周期" prop="maintainPeriod">
            <el-input v-model.trim="temp.maintainPeriod" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维护周期类型" prop="maintainPeriodType">
            <el-select v-model.trim="temp.maintainPeriodType">
              <el-option
                v-for="item in maintainPeriodTypeOptions"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
            <!-- <el-input v-model.trim="temp.maintainPeriodType" placeholder="请输入" /> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="维保联系人">
            <el-input v-model.trim="temp.maintainContact" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话">
            <el-input v-model.trim="temp.maintainTel" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属部门" prop="userGroupId">
            <el-cascader
              v-model.trim="temp.userGroupId"
              :options="groupTree"
              :show-all-levels="false"
              :props="{ checkStrictly: true }"
              @change="userGroupIdChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房间地点">
            <el-input v-model.trim="temp.location" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注">
        <el-input v-model.trim.trim="temp.memo" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? createData() : updateData()"
        >
          提交
        </el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script>
import { saveEquipment, updateEquipment } from '@/api/base/equipment'
import { listUserGroupTreeItemForManage } from '@/api/uc/userGroup'

export default {
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    currentRow: {
      type: Object,
      default: null
    },
    dialogStatus: {
      require: true,
      type: String,
      default: 'create'
    },
    categoryOptions: {
      type: Array,
      default: null
    },
    scope: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      temp: {
        scope: parseInt(this.scope)
      },
      rules: {
        category: [
          { required: true, message: '设备分类不能为空', trigger: 'change' }
        ],
        equipmentCode: [
          { required: true, message: '设备编号不能为空', trigger: 'blur' }
        ],
        equipmentName: [
          { required: true, message: '设备名称不能为空', trigger: 'blur' }
        ],
        maintainPeriod: [
          { required: true, message: '维护周期不可为空', trigger: 'change' }
        ],
        userGroupId: [
          { required: true, message: '所属部门不可为空', trigger: 'change' }
        ],
        maintainPeriodType: [
          { required: true, message: '维护周期类型不可为空', trigger: 'change' }
        ]
      },
      textMap: {
        update: '修改设备',
        create: '新增设备'
      },
      loading: false,
      groupTree: [],
      maintainPeriodTypeOptions: [
        { key: 0, value: '按需' },
        { key: 1, value: '天' },
        { key: 2, value: '周' },
        { key: 3, value: '月' },
        { key: 4, value: '年' }
      ]
    }
  },
  computed: {
    visibility: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible(value) {
      if (value) {
        this.temp = Object.assign({}, this.currentRow)
        this.temp.scope = this.scope
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      }
    }
  },
  mounted() {
    this.getGroupTree()
  },
  methods: {
    userGroupIdChange(val) {
      console.log(val, '3333')
      // this.temp.userGroupId = val[val.length - 1]
      // console.log(this.temp.userGroupId,'this.temp.userGroupId');
    },
    getGroupTree() {
      listUserGroupTreeItemForManage({ parentUserGroupId: null }).then(
        (res) => {
          this.groupTree = res.data
          console.log(res.data)
        }
      )
    },
    createData() {
      this.loading = true
      this.$refs['dataForm'].validate((valid) => {
        // this.temp.userGroupId = null
        this.temp.userGroupId[this.temp.userGroupId.length - 1]
        console.log(this.temp, 'wa')
        if (valid) {
          saveEquipment(this.temp)
            .then(() => {
              this.visibility = false
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.$emit('saveData', {})
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
    updateData() {
      this.loading = true
      this.$refs['dataForm'].validate((valid) => {
        this.temp.userGroupId =
          this.temp.userGroupId[this.temp.userGroupId.length - 1]
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          updateEquipment(tempData)
            .then(() => {
              this.visibility = false
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.$emit('saveData', tempData)
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

